<template>
  <div class="main-box">
    <div class="box-centers">
      <div class="left-box">
        <div class="avatar">
          <div class="img">
            <img src="@/assets/images/bgk6.webp" alt="">
          </div>
          <div class="bottom">
            <span>130****4710</span>
            <div class="btn">
              <div class="circle">
                星钻会员
                <i class="iconfont icon-vip2"/>
              </div>
            </div>
          </div>
        </div>
        <div class="box-target">
          <div class="box-target-1">
            <p class="title">用户余额</p>
            <p class="money">
              130.00
              <i class="iconfont icon-VIPquanyi"/>
            </p>
            <div class="bottom">
              <a href="javascript:void (0)"><van-icon name="refund-o" style="margin-right: 5px"/> 充值</a>
              <a href="javascript:void (0)"><van-icon name="cash-back-record-o" style="margin-right: 5px"/> 提现</a>
            </div>
          </div>
        </div>
<!--        <div class="box-center-1">-->
<!--          <div class="box-swiper">-->
<!--            <img src="https://static.iamxk.com/wp-content/uploads/2020/09/ti178t000907_300dpi.jpg" alt="">-->
<!--          </div>-->
<!--        </div>-->
        <div class="box-nav">
          <a href="javascript:void (0)"
             v-for="(item,index) in list"
             :key="index"
             @click="change(item,item.path)"
             :class="{active:active === item.id}"
             class="item">
            <span>{{ item.name }}</span>
            <van-icon size="16px" name="arrow" />
          </a>
        </div>
      </div>
      <div class="right-box">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {getSsq} from "@/utils/ssq";
export default {
  data(){
    return{
      active:1,
      list:[
        {id:1,name:'我的首页',path:'/user/home'},
        {id:2,name:'申请发票',path:'/user/invoice'},
        {id:3,name:'我的收藏',path:'/user/collect'},
        {id:4,name:'我的下载',path:'/user/download'},
        {id:5,name:'购买记录',path:'/user/buy'},
        {id:6,name:'文件上传',path:'/user/upload'},
        {id:7,name:'我的账号',path:'/user/account'},
        // {id:7,name:'我的优惠券',path:'/user/home'},
      ]
    }
  },
  methods:{
    getList(){
      axios({
        method:'get',
        url:'/api/cwl_admin/front/cwlkj/search/kjxx/findDrawNotice',
        params:{
          name:'ssq',
          issueCount:105,
          pageNo:1,
          pageSize:105,
          systemType:'PC'
        }
      }).then(res=>{
        console.log(res)
        // 获取当前号码会买了多少
        getSsq(res.data.result)
      })
    },
    change(item,path){
      console.log(item)
      this.active = item.id
      this.$router.push(path).catch(err=>{})
    },


    // 获取当前路由
    getRouter(item){
      this.active = item.meta.checked
    }
  },
  watch:{
    '$route':{
      handler(newValue,oldValue){
        this.getRouter(newValue)
      },
      immediate:true,
      deep:true,
    }
  },
  mounted() {
    // this.getList()
    this.getRouter(this.$route)
  }
}
</script>

<style scoped lang="scss">
  .main-box{
    width: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    .box-centers{
      width: 1300px;
      min-height: 600px;
      background: #fff;
      margin-top: 50px;
      padding: 0 0 50px 0;
      display: flex;
      justify-content: space-between;
      .left-box{
        width: 300px;
        min-height: 600px;
        border-right: 1px solid #f8f8f8;
        .avatar{
          width: 300px;
          height: 200px;
          text-align: center;
          padding: 20px 0 10px 0;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          background-image: linear-gradient(to top, #fff 0%, #f9d423 100%);
          border-radius:  0 0 100px 100px;
          .img{
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            img{
              width: 60px;
              object-fit: contain;
            }
          }

          .bottom{
            width: 60%;
            height: 80px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: left;
            flex-wrap: wrap;
            margin-left: 10px;
            span{
              font-size: 14px;
              font-family: 'OPPOR', sans-serif;
            }
            .btn{
              width: 100%;
              display: flex;
              justify-content: left;
              margin-top: -15px;
              .circle{
                height: 20px;
                background: #8e6531;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                color: #fff;
                border-radius: 15px;
                font-size: 10px;

                box-sizing: border-box;
                i{

                  font-size: 26px;
                  color: #F56C6C !important;
                }
              }
            }


          }
        }
        .box-target{
          width: 100%;
          height: 180px;
          display: flex;
          justify-content: center;
          margin-top: -80px;
          .box-target-1{
            width: 250px;
            border-radius: 45px;
            height: 180px;
            background: #fff;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            padding: 8% 30px;
            box-sizing: border-box;
            .title{
              width: 100%;
              font-size: 14px;
              color: #333333;
              font-family: oppoM,'sans-serif';
            }
            .money{
              width: 100%;
              font-size: 32px;
              margin-top: 10px;
              color: #e5993a;
              font-family: OPPOB, sans-serif;
              i{
                font-size: 22px;
                margin-left: 5px;
              }
            }
            .bottom{
              width: 100%;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 15px;
              a{
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 5px;
                font-size: 14px;
                width: 100px;
                color: #fff;
                height: 35px;
                border-radius: 30px;
                background: #e6b980;
              }
            }
          }
        }
        .box-center-1{
          width: 100%;
          height: 80px;
          margin-top: 15px;
          display: flex;
          justify-content: center;
          .box-swiper{
            width:280px;
            height: 80px;
            background: #fff;
            border-radius: 30px;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            img{
              height: 80px;
              width: 100%;
              border-radius: 30px;
              object-fit: cover;
            }
          }
        }
        .box-nav{
          width: 100%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          margin-top: 20px;
          .item{
            margin-bottom: 10px;
            width: 280px;
            height: 50px;
            border-radius: 30px;
            background: #fff;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            display: flex;
            justify-content: space-between ;
            align-items: center;
            padding: 0 5%;
            box-sizing: border-box;
            span{
              font-size: 14px;
              font-family: 'oppoB', sans-serif;
              color: #333333;
            }
          }
          .active{
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
            color: #fff;
            span{
              color: #fff;
            }
          }
        }
      }
      .right-box{
        width: 1000px;
        min-height: 600px;

      }
    }
  }
</style>